<!-- 

<style type="text/css" media="screen">
.borderstyle {
    border: 1px solid #b6b6b6;
    width: 320px;
    height: 240px;
}
#camera {
    float: left;
    margin:10px;
}
#canvas {
    width: 320px;
    height: 240px;
    margin:10px;
}
</style>
<div>

    <div id="camera" class="borderstyle"></div>
    <canvas id="canvas" class="borderstyle" width="300px" height="240px"></canvas>
    <div id="showImg"></div>
    <button class="play">拍照</button>
    <button onclick="uploadImage()">上传照片</button> 
</div>
<script type="text/javascript">
$(function () {
    var w = 320, h = 240;
    var pos = 0,
        ctx = null,
        saveCB;

    var canvas = document.getElementById("canvas")
//     alert(canvas.toDataURL)
    if (canvas.toDataURL) {
        ctx = canvas.getContext("2d");
        var image = ctx.getImageData(0, 0, w, h);

        saveCB = function (data) {
            var col = data.split(";");
            var img = image;

            for (var i = 0; i < 320; i++) {
                var tmp = parseInt(col[i]);
                img.data[pos + 0] = (tmp >> 16) & 0xff;
                img.data[pos + 1] = (tmp >> 8) & 0xff;
                img.data[pos + 2] = tmp & 0xff;
                img.data[pos + 3] = 0xff;
                pos += 4;
            }

            if (pos >= 4 * 320 * 240) {
                ctx.putImageData(img, 0, 0);
                //var Imagedata = canvas.toDataURL("image/png");
                var Imagedata = canvas.toDataURL("image/png").substring(22);  //上传给后台的图片数据   
                pos = 0;
            }
        };
    } else {
        var image = [];
        saveCB = function (data) {
            image.push(data);
            pos += 4 * 320;
            if (pos >= 4 * 320 * 240) {
                $.post(URL, {briStr: image.join(';')}, function (data) {
                    console.log(data);
                    //在页面显示base64图片处理
                   
                    pos = 0;
                    image = [];
                });
            }
        };
    }

    $("#camera").webcam({
        width: w,
        height: h,
        mode: "callback", 
        swffile: "plugins/jQuery-webcam-master/jscam.swf",
        onSave: saveCB,
        onCapture: function () {               //捕获图像
            webcam.save();
        },
        debug: function (type, string) {       //控制台信息
            //console.log(type + ": " + string);
        },
        onLoad: function () {                   //flash 加载完毕执行
            //console.log('加载完毕！')
        }
    });

    $(".play").click(function () {
        webcam.capture();
    });

});
function uploadImage(){
	var Pic = document.getElementById("canvas").toDataURL("image/png").substring(22);                
    //对其进行base64编 之后的字符串  
    //Pic = Pic.replace(/^data:image\/(png|jpg);base64,/,"") 
	if(Pic==""){
		return;
	}else{
		//alert(Pic)//dialogAjaxDone
		$.post("applicationSingle/uploadImage",{image:Pic},function(json){
			if(json.statusCode=="200"){
				$("#photo").html("<img style='border-style: solid;border-color: #E5EDEF;border-width: 2px' width='72' height='80' alt='查看图片'src="+json.photoPath+">")
				$.pdialog.closeCurrent();
				
				
			}
		},"json")
	}
}
</script>  -->
<script> 
$(function(){
	$.post("applicationSingle/getRealPath",function(json){
		$("input[name='photoPath']").val(json.photoPath)
		$("input[name='enclosurePath']").val(json.enclosurePath)
		$("input[name='photoPath2']").val(json.photoPath2)
		$("input[name='enclosurePath2']").val(json.enclosurePath2)
		$("input[name='photoName']").val(json.photoName)
	},"json")
})

//拍照
function SS_CMR_Photo()
{
	    var phAddr;
	    var phstyle;
	    var phName;
	    var fileAddr;
	    var busType=$("#busTypeByPhoto").val();
	    if (GPYNo < 0)
	    {
			alert("请先打开主摄像头");
			return;
	    }
	    //phAddr=document.getElementById("saveText").value;
	    var showPath;
	    if(busType=="ZJ"){
	    	phAddr=$("input[name='photoPath']").val();
	    	showPath="."+$("input[name='photoPath2']").val()
	    	
	    }else if(busType=="CJD"){
	    	phAddr=$("input[name='enclosurePath']").val();
	    	showPath="."+$("input[name='enclosurePath2']").val();
	    }
	    
	    if(phAddr == "")
	    {
			alert("请输入保存路径");
			return;
        }
		phstyle=document.getElementById("photoStyle").value;
		phName = $("input[name='photoName']").val()+"_"+busType;
		fileAddr = phAddr+phName+phstyle;
    if((GPYNo != -1))
		{	 
      GPRActiveX.SSCMRPhoto(GPYNo ,fileAddr);
      if(busType=="ZJ"){
    	  $("#photo").html("<img style='border-style: solid;border-color: #E5EDEF;border-width: 2px' width='72' height='80' alt='查看图片'src="+showPath+phName+phstyle+"?"+Math.random()+">")         
      }     
      showImage(showPath+phName+phstyle+"?"+Math.random());	
     
    }  
}

function SS_CMR_ParaSet()
{
	  if (GPYNo < 0)
	  {
		  alertMsg.warn("请先打开主摄像头");
			return;
	  }
	  GPRActiveX.SSCMRParaSet(GPYNo);
}

function showImage(file)
{
	//alert(file)
   document.getElementById('mypic').src = file;
/*  	var reader = new FileReader();
	 reader.readAsDataURL(file); 
	    reader.onload=function(e){ 
	        var result=document.getElementById("mypic"); 
	        //显示文件 
	        result.innerHTML='<img src="' + this.result +'" alt="" />'; 
	    }  */
   reader.readAsDataURL(file.files[0]); 
}
function selectImage(file)
{
	if (!file.files || !file.files[0])
	{
		return;
	}
	var reader = new FileReader();
	reader.onload = function (evt)
	{
        document.getElementById('mypic').src = evt.target.result;
        image = evt.target.result;
	}
        reader.readAsDataURL(file.files[0]);
}
function getCurDate()
{
	 var today,intYears,intMonths,intDays,intHours, intMinutes, intSeconds;
	 var curdate;
  		 	today = new Date(); //系统当前时间
	 intYears = today.getFullYear(); //得到年份,getFullYear()比getYear()更普适
	 intMonths = today.getMonth() + 1; //得到月份，要加1
	 intDays = today.getDate(); //得到日期
	 intHours = today.getHours(); //得到小时 
	 intMinutes = today.getMinutes(); //得到分钟
	 intSeconds = today.getSeconds(); //得到秒钟
	 curdate = intYears+"-"+intMonths+"-"+intDays+"-"+intHours+"-"+intMinutes+"-"+intSeconds; 
	 return curdate;
}
</script>
<div class="pageContent">
<input type="hidden" name="photoPath">
<input type="hidden" name="photoName">
<input type="hidden" name="enclosurePath">
<input type="hidden" name="photoPath2">
<input type="hidden" name="enclosurePath2">
<!--左-->
<div style="width: 45%;height: 100%;float: left">
	<OBJECT id="GPRActiveX" width="305" height="280" classid="clsid:81AD3409-2634-4394-8F0C-99CD5B0A6D75" style="padding-top: 5px"></OBJECT>
	<div style="width: 280;height: 400;margin-top: 5px">
		<fieldset > 
		<legend>照片预览:</legend> 
		<img src= "" id="mypic" name="mypic" width='300' height='280'/>		 
		
		</fieldset>
	</div>
</div>
<!--右-->
<div style="width: 50%;height: 100%;float: left;padding-left: 20px;margin-top: 5px">
<div>		
			<fieldset>
			<legend>摄像头:</legend>
			<div style="margin-top: 5px;">
				<p>
				<label>摄像头编号：</label> 
				<br><br>
				<select id="CamNo" style="width: 300Px">
					<option value="0" selected>0号摄像头</option>
	    				<option value="1">1号摄像头</option>
					<!-- <option value="2">2号摄像头</option> -->
					</select>
				</p>
				<br>
				<p>
					<input type="button" class="newButton" onclick="SS_CMR_Open()" value="开启摄像头" />
					<input type="button" class="newButton" onclick="SS_CMR_Close()" value="关闭摄像头"/>
					<input type="button" class="newButton"  onclick="SS_CMR_GetStatus()" value="获取摄像头状态">
				</p>
				</div>
				</fieldset>		
				<fieldset > 
				<legend>操作:</legend>
				<div style="margin-top: 5px;">
				<p>
					<label>拍照业务类型：</label>
					<br><br>
					<select id="busTypeByPhoto" style="width: 300Px">
						<option value="ZJ">证件类型</option>
						<option value="CJD">采集单</option>
					</select>
					
				</p>
				<br><br>
				<p>
					<input type="button" class="newButton" onclick="SS_CMR_Photo()" value="拍照" />
					<input type="button" class="newButton" onclick="SS_CMR_ParaSet()" value="相机属性设置"/>
				</p>
				<br>
			<!-- 	<p>
					<label>存储路径：</label>
					<br><br>
					<input type="text"  id="saveText" value="\\192.168.0.12\qzsmk\" style="width: 300px;text-align: left;"/>		
				</p>
				<br> -->	
				<p>
					<label>照片格式：</label>
					<br><br>
					<select id="photoStyle" style="width: 300Px">
					<option value=".jpg" selected>jpg格式</option>
	      			<option value=".bmp">bmp格式</option>
					<option value=".png">png格式</option>
					</select>
				</p>
				</div>
				</fieldset>	
		</div>
</div>
</div>